<template>
	<view class="tuvedo">
		<view class="tuvedo-view ">
			<view class="tuvedo-flex">结束倒计时<uni-countdown color="#fff" background-color="#333333" :show-day="false" :hour="0" :minute="0" :second="assble.time"></uni-countdown></view>
		    <view class="pic">
		    	<scroll-view :scroll-x="true" @scroll="scroll" class="scroll_pic">
		    		<view class="header_pic" v-for="(item,index) in attrArry" :key="index">
		    			<image :src="item.avatar" mode="" v-if="item.id == 1 && item.avatar"></image>
		    			<image :src="Url+'mine/discount/header01.png'" mode="" v-else-if="item.id == 1 && !item.avatar"></image>
		    			<image :src="Url+'add_images/group_no.png'" mode="" v-else></image>
		    			<view class="team" v-if="index == 0">
		    				团长
		    			</view>
		    		</view>
		    	</scroll-view>
		    </view>
			<view class="tuvedo-ji">
				还差<text>{{assble.last_num}}</text>人，赶快邀请好友来拼单吧
			</view>
		</view>
		<view class="tuvedo-btn">
			<view @tap="backHome">返回首页</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="tuvedo-btn-lose share" open-type="share">邀请好友</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tuvedo-btn-lose" @tap="h5Share">邀请好友</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="tuvedo-btn-lose" @tap="appShare">邀请好友</view>
			<!-- #endif -->
		</view>
		<shop-loading v-if="shopLoad"></shop-loading>
		<share-model v-model="shareshow"></share-model>
		<sc-home></sc-home>
	</view>
</template>

<script>
	// #ifdef H5
	import wxsdk from '@/static/js/wechat.js';
	// #endif
	import shareModel from '@/components/shareModel/shareModel.vue';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import { friendOrder,assembleShare } from '@/common/index.js';
	export default {
		components:{
			uniCountdown,shareModel
		},
		data() {
			return {
				list:[
					{avatar:this.Imgurl + 'mine/discount/product01.png'}
				],
				user_assemble_id:0,
				assble:{},
				Url:this.Imgurl,
				shopLoad:true,
				shareshow:false,
				shareLod:'',
				type:'',
				attrArry:[]
			};
		},
		onShareAppMessage(res) {
			const {assble,user_assemble_id} = this;
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title:'您的好友'+assble.nick_name+'邀请您一起参加拼团活动,'+assble.goods.name,
		      path: '/pageB/groupTuxedo/tuxedoIm?id='+user_assemble_id,
			  imageUrl:assble.goods.img
		    }
		},
		onLoad(ops) {
			// console.log(ops)
			this.user_assemble_id = +ops.id
			this.type = ops.type
			this.friendOrder()
		},
		methods:{
			//h5分享
			h5Share(){
				let that = this;
				// console.log(wxsdk.share)
				this.shareshow = true;
				const {assble,user_assemble_id,shareLod,type} = this;
				let goods = assble.goods;
				assembleShare({id:user_assemble_id}).then(res=>{
					if(res.code == 1){
						wxsdk.share(
							{
								title:'您的好友'+assble.nick_name+'邀请您一起参加拼团活动',
								path: res.msg,
								imageUrl: goods.img,
								desc:goods.name,
								url:'https://shop.jyecloud.cn/h5/pageB/groupTuxedo/groupTuxedo?id='+user_assemble_id+'&type='+type
							},
							res => {
								// console.log(res)
								that.shareshow = false;
								that.toast('分享成功');
							}
						);
					}
				}).catch()
			},
			//app分享
			appShare(){
				const {user_assemble_id,assble} = this;
				let goods = assble.goods;
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: '/pageB/groupTuxedo/tuxedoIm?id='+user_assemble_id,
				    title:'您的好友'+assble.nick_name+'邀请您一起参加拼团活动,'+goods.name,
				    summary: goods.brief,
				    imageUrl:goods.img,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			backHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			scroll(){
				
			},
			friendOrder(){
				const {user_assemble_id,type} = this;
				this.shopLoad = true;
				friendOrder({user_assemble_id:user_assemble_id,type}).then(res=>{
					if(res.code == 1){
						this.shopLoad = false;
						if(res.msg.state == 1){
							this.toast('订单拼团成功')
							setTimeout(() => {
								// console.log('进入返回')
							  uni.reLaunch({
							  	url: '/pageD/pay-Success/pay-Success?payType=1'+'&type='+type
							  });
							}, 2000);
						}
						console.log('页面',res.msg)
						this.assble = res.msg;
						let data = res.msg.user;
						this.attrArry = JSON.parse(JSON.stringify(data))
					}else{
						this.shopLoad = false;
						this.toast(res.msg)
					}
				}).catch()
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss">
	$succeee:#09BB07;
	$lose:#FF2842;
	.tuvedo-btn{
		display: flex;
		align-items: center;
		justify-content:space-between;
		padding:0 30upx;
		view{
			width: 48%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			font-size: 32upx;
			border-radius: 40upx;
			&:first-child{
				border:2upx solid #666666;
				color: #666666;
			}
			&:last-child{
				color: #FFFFFF;
			}
		}
		&-succ{
			background-color:$succeee ;
		}
		&-lose{
			background-color:$lose;
		}
		.share{
			margin: 0;
			padding: 0;
			width: 48%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			font-size: 32upx;
			border-radius: 40upx;
			color: #FFFFFF;
			&::after{
				border: none;
			}
		}
	}
	.tuvedo-ji{
		margin-top:65upx;
		font-size: 30upx;
		display: block;
		text-align: center;
		color: #666666;
		text{
			color: #FF2842;
		}
	}
	.tuvedo-view{
		padding:200upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tuvedo-flex{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		
	}
		.title {
			font-size: 28upx;
			color: #333;
			display: flex;
			align-items: center;
	
			.uni-countdown {
				transform: scale(0.9);
			}
		}
	
		.pic {
			display: flex;
			margin-top: 30upx;
	
			.scroll_pic {
				// width: 600upx;
				width: 750upx;
				height: 120upx;
				white-space: nowrap;
			}
	
			.header_pic {
				width: 106upx;
				height: 106upx;
				margin-right: 20upx;
				border-radius: 50%;
				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
	
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
	
			.header_pic:first-child {
				border: none;
				background-color: #f73e2f;
				position: relative;
				border:4upx solid rgba(255, 40, 66, 1);
				.team {
					width: 82upx;
					height: 36upx;
					border-radius: 8upx;
					font-size: 24upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36upx;
					background:linear-gradient(-90deg,rgba(255,94,113,1),rgba(255,40,66,1));
					position: absolute;
					left: 50%;
					bottom: -10upx;
					transform: translate(-50%);
				}
			}
		}
	
		.orderbtn_i {
			margin-top: 30upx;
			width: 156upx;
			height: 46upx;
			text-align: center;
			line-height: 46upx;
			border-radius: 8upx;
			font-size: 24upx;
		}
	
		.orderbtn_right {
			background-color: #FF2842;
			color: #ffffff;
		}

</style>
